<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>siluan信息</title>

    <link href="./firstpage/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="./firstpage/css/common.css">
    <link rel="stylesheet" href="./css/layoutHZZ.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <link rel="stylesheet" href="./css/li.css">
    <link rel="stylesheet" href="./css/gis.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.30/esri/css/esri.css">
    <style type="text/css">
    	.layui-table tbody tr:hover, .layui-table thead tr{
    		background-color: rgb(8,24,50);
    	}
    	.layui-table{
    		background-color: rgba(7, 41, 81, 0.85);
    		color: #d6dbe2;
    	}
    	.layui-table td, .layui-table th{
    		border-color: #004867;
    	}
    	body .layui-layer-title{
    		border-bottom: 1px solid #034c6a;
        }
        /*图层管理样式重新定义*/
        /* 选中管理树，背景仍然是白色 */
        .tree-node-selected{background-color:#fff}
        #treeBox .tree-title{ font-size: 14px}
        .tree-node {
            height: 18px;
            white-space: nowrap;
            cursor: pointer;
            margin: 2px;
        }
        .infoTemplatestable table
        {
            border: 1px solid white;
            text-align: center;
            /* background-color:rgba(23,93,154,0.55); */
            font-size:12px;
            font-weight:bold;
            color:crimson;
        }
        .infoTemplatestable tr
        {
            border: 1px solid white;
            text-align: center;
            /* background-color:rgba(23,93,154,0.55); */
            font-size:12px;
            color:crimson;
        }
        .infoTemplatestable th
        {
            border: 1px solid white;
            text-align: center;
            /* background-color:rgba(23,93,154,0.55); */
            font-size:12px;

        }
        .infoTemplatestable td
        {
            border: 1px solid white;
            text-align: center;
            /* background-color:rgba(23,93,154,0.55); */
            font-size:12px;

        }

        .infoTemplatestable table .white
        {
            color:rgb(255, 255, 255);

        }
        .infoTemplatestable table .blue
        {
            /* background-color:rgba(48,96,143,0.55); */
        }
        .infoTemplatestable td
        {
            height: 40px;
        }
        .infoTemplatestable table .th-width
        {
            width:198px;

        }
        .infoTemplatestable table .td-width
        {
            width:200px;

        }




        #exChart-div {
        position: absolute;
        bottom: 5px;
        right: 5px;
        width: 340px;
        height: 230px;
        background-color: rgba(0, 0, 0, 0.7);
        border: 1px solid #034c6a;
        box-shadow: -10px 0px 15px #034c6a inset, /*左边阴影*/
        0px -10px 15px #034c6a inset, /*上边阴影*/
        10px 0px 15px #034c6a inset, /*右边阴影*/
        0px 10px 15px #034c6a inset;
        display: none;
    }

    #exChart{
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        padding: 5px
    }

    </style>
</head>
<script>
    // var curPath = window.document.location.href;
    // var package_path = curPath.substring(0, curPath.lastIndexOf("/"));
    // var dojoConfig = {
    //     packages: [{
    //         name: 'measure',
    //         location: package_path + '/measure'
    //     }],
    //     parseOnLoad: false
    // };
    </script>
<body>
    <div class="data_content">
        <div class="data_main">
            <div class="main_center fl">
                <div class="center_text">
                    <div id="mapDiv" style="width:100%;height:100%;"></div>
                    <div style="position: absolute; right:0; top:5px; z-index: 10;">

                        <div id="navDiv1" style="float: right; overflow: hidden; padding: 0px; border: 0px;">
                            <div id="layerListTool" class="navItem1"  style="background-color:#0080c0 ; margin-right:2px ;">
                                <img src="./images/layer_list.png" title="图层管理" onclick="layerListBoxManege()" style="cursor: pointer;transition: all 0.3s;margin: 0 auto;  position: relative;left:3.2px;top:3.2px;width:80%;height:80%;" src="images/layer_list.png"/>
                            </div>

                            <div id="measureTools" class="navItem measure" >
                                <img src="./images/ruler.png" title="地图测量" />
                                <ul class="drop-down-content">
                                    <li><a href="javascript:;" class="measure-distance">距离测量</a></li>
                                    <li><a href="javascript:;" class="measure-area">面积测量</a></li>
                                </ul>
                            </div>
                            <div id="legendTool" class="navItem1" style="background-color:#78c3bf">
                                <img title="图例" onclick="legendBoxManege()"  style="cursor: pointer;transition: all 0.3s;margin: 0 auto;  position: relative;left:5.6px;top:5.6px;width:65%;height:65%;" src="./images/legend.png"/>
                            </div>

                        </div>
                    </div>
                    <div id="layerListBox"  class="layerListBox" style="display: none; background-color: rgba(255, 255, 255,1) ">
                        <div id="layerListBoxDraggable">
                            <ul id="treeBox" class="easyui-tree" ></ul>
                        </div>
                    </div>
                    <div id="legendBox" class="legendBox" style="display: none; background-color: #fff">
                        <div  id="legendDiv">
                        </div>
                    </div>
                    <div id="exChart-div">
                        <div id="exChart"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!--content结束-->
</body>
<script>
    var selfUrl = document.location.href.substring(0,document.location.href.lastIndexOf("/"));
    var dojoConfig = {
    packages: [
        { name: "measure", location: selfUrl+"/measure" },
        { name: "esrichina", location: selfUrl+"/esrichina" }
    ]
};
</script>
<script src="./firstpage/js/jquery-2.2.1.min.js"></script>
<script src="./firstpage/js/bootstrap.min.js"></script>
<script src="./echarts/echarts.min.js"></script>
<script type="text/javascript" src="./firstpage/js/jquery.cookie.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="./layer/layer.js"></script>
<script type="text/javascript" src="./firstpage/js/drag.js"></script>
<script src="https://js.arcgis.com/3.30/init.js"></script>
<script type="text/javascript">
var map;
var layerJson;
var img={};
require(["dojo/dom",
    "dojo/query",
    "dojo/on",
    "esri/map",
    "measure/MeasureTools",
    "esri/dijit/OverviewMap",
    "esri/toolbars/navigation",
    "esri/layers/FeatureLayer",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/layers/ArcGISTiledMapServiceLayer",
    "esri/InfoTemplate",
    "esrichina/TianDiTuLayer",
    "esri/geometry/Extent",
    "esri/renderers/HeatmapRenderer",
    "esri/geometry/Point",
    "esri/dijit/Legend",
    "esri/tasks/IdentifyTask",
    "esri/tasks/IdentifyParameters",
    "esri/layers/layer",
    "dojo/dnd/Moveable",
    "dojo/domReady!pages/Group1st/p11"
], function(
    dom,
    query,
    on,
    Map,
    MeasureTools,
    OverviewMap,
    Navigation,
    FeatureLayer,
    ArcGISDynamicMapServiceLayer,
    ArcGISTiledMapServiceLayer,
    InfoTemplate,
    TianDiTuLayer,
    Extent,
    HeatmapRenderer,
    Point,
    Legend,
    IdentifyTask,
    IdentifyParameters,
    Moveable) {
    map = new Map("mapDiv",
    {
        // extent:new Extent({"xmin":109.381,"ymin":18.25,"xmax":109.905,"ymax":18.42,"spatialReference":{"wkid":4326}}),

        // extent:new Extent({"xmin":109.24,"ymin":18.17,"xmax":109.89,"ymax":18.45,"spatialReference":{"wkid":4326}}),
        extent:new Extent({"xmin":109.57210122389341,"ymin":18.25741878055311,"xmax":109.63896787297,"ymax":18.37921074568021,"spatialReference":{"wkid":4326}}),
        maxZoom:17,
        logo:false,

    });

    var TiandiTilelayer = new TianDiTuLayer(TianDiTuLayer.IMG_BASE_WEBMERCATOR);
    var TiandiAnolayer = new TianDiTuLayer(TianDiTuLayer.IMG_ANNO_WEBMERCATOR);
    map.addLayer(TiandiTilelayer);
    map.addLayer(TiandiAnolayer);


    layer_tiledms20170901=new ArcGISTiledMapServiceLayer("http://####:#/arcgis/rest/services/sanyaHZZ/tiledms20170901/MapServer",{id:"2017年9月大茅水河道影像"});
    map.addLayer(layer_tiledms20170901);
    layer_tiledms20181029=new ArcGISTiledMapServiceLayer("http://####:#/arcgis/rest/services/sanyaHZZ/tiledms20181029/MapServer",{id:"2018年10月大茅水河道影像"});
    map.addLayer(layer_tiledms20181029);
    layer_tiledms20181029.setVisibility(true);
    layer_tiledms20170901.setVisibility(false);

    layer_HNXZQH=new ArcGISDynamicMapServiceLayer("http://####:#/arcgis/rest/services/CXHN/HNXZQH/MapServer",{id:"海南行政区划"});
    map.addLayer(layer_HNXZQH);

    addLegend();

    layerJson=[
            {

                "text":"2017年9月大茅水河道影像",
                "layerId":"2017年9月大茅水河道影像",
                "mapServiceStyle":"大茅水河道影像",
                "checked":false,

                // "url":"http://####:#/arcgis/rest/services/sanyaHZZ/tiledms20170901/MapServer"

            },
            {

                "text":"2018年10月大茅水河道影像",
                "layerId":"2018年10月大茅水河道影像",
                "mapServiceStyle":"大茅水河道影像",
                "checked":true,

                // "url":"http://####:#/arcgis/rest/services/sanyaHZZ/tiledms20181029/MapServer"

            },
            {

                "text":"第一批河道管理范围",
                "layerId":"第一批河道管理范围",
                "mapServiceStyle":"FeatureLayer",
                "checked":false,
                // "infoTemplates":new InfoTemplate("属性","河流名称：${name}"),
                "infoTemplates":new InfoTemplate("河道属性",'<div class="infoTemplatestable"><table>'+
                            '<tr>'+
                                '<td class="white blue th-width">'+'河流名称'+'</td>'+
                                '<td class="white td-width">'+'${name}'+'</td>'+
                            '</tr>'+
                        '</table> </div>'),
                "url":"http://####:#/arcgis/rest/services/sanyaHZZ/river/FeatureServer/0"

            },
            {

                "text":"水库管理及保护范围",
                "layerId":"水库管理及保护范围",
                "mapServiceStyle":"FeatureLayer",
                "checked":false,
                "infoTemplates":new InfoTemplate("水库属性",'<div class="infoTemplatestable"><table >'+
                            '<tr>'+
                                '<td class="white blue th-width">'+'水库名称'+'</td>'+
                                '<td class="white td-width">'+'${name}'+'</td>'+
                            '</tr>'+
                        '</table></div>'),
                "url":"http://####:#/arcgis/rest/services/sanyaHZZ/reservoir/FeatureServer/0"

            },
            {

                "text":"2017年9月四乱数据",
                "layerId":"2017年9月四乱数据",
                "mapServiceStyle":"FeatureLayer",
                "checked":true,
                "infoTemplates":new InfoTemplate("河道四乱属性",'<div class="infoTemplatestable"><table >'+
                            '<tr>'+
                                '<td class="white blue th-width">'+'面积(平方米)'+'</td>'+
                                '<td class="white td-width">'+'${面积}'+'</td>'+

                            '</tr>'+
                            '<tr>'+
                                '<td class="white blue th-width">'+'类型'+'</td>'+
                                '<td class="white td-width">'+'${类型}'+'</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td colspan="2"><div><img src="./images/${类型}.png" style="height:300px;width:398px" alt="四乱照片" /></div></td>'+
                            '</tr>'+
                        '</table></div>'),
                "url":"http://####:#/arcgis/rest/services/sanyaHZZ/siluan201709/FeatureServer/0"

            },
            {

                "text":"2018年10月四乱数据",
                "layerId":"2018年10月四乱数据",
                "mapServiceStyle":"FeatureLayer",
                "checked":true,
                "infoTemplates":new InfoTemplate("河道四乱属性",'<div class="infoTemplatestable"><table >'+
                            '<tr>'+
                                '<td class="white blue th-width">'+'面积(平方米)'+'</td>'+
                                '<td class="white td-width">'+'${面积}'+'</td>'+

                            '</tr>'+
                            '<tr>'+
                                '<td class="white blue th-width">'+'类型'+'</td>'+
                                '<td class="white td-width">'+'${类型}'+'</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td colspan="2"><div><img src="./images/${类型}.png" style="height:300px;width:398px" alt="四乱照片" /></div></td>'+
                            '</tr>'+
                        '</table></div>'),
                "url":"http://####:#/arcgis/rest/services/sanyaHZZ/siluan201810/FeatureServer/0"

            },
            {

                "text":"2018年新增四乱数据",
                "layerId":"2018年新增四乱数据",
                "mapServiceStyle":"FeatureLayer",
                "checked":true,
                "infoTemplates":new InfoTemplate("河道四乱属性",'<div class="infoTemplatestable"><table >'+
                            '<tr>'+
                                '<td class="white blue th-width">'+'面积(平方米)'+'</td>'+
                                '<td class="white td-width">'+'${面积}'+'</td>'+

                            '</tr>'+
                            '<tr>'+
                                '<td class="white blue th-width">'+'类型'+'</td>'+
                                '<td class="white td-width">'+'${类型}'+'</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td colspan="2"><div><img src="./images/${类型}.png" style="height:300px;width:398px" alt="四乱照片" /></div></td>'+
                            '</tr>'+
                        '</table></div>'),
                "url":"http://####:#/arcgis/rest/services/sanyaHZZ/siluan20172018xz/FeatureServer/0"

            },
            {

                "text":"大茅水河道污染源",
                "layerId":"大茅水河道污染源",
                "mapServiceStyle":"FeatureLayer",
                "checked":false,
                "infoTemplates":new InfoTemplate("污染源属性",'<div class="infoTemplatestable"><table >'+
                            '<tr>'+
                                '<td class="white blue th-width">'+'养殖面积(平方米)'+'</td>'+
                                '<td class="white td-width">'+'${面积}'+'</td>'+

                            '</tr>'+
                            '<tr>'+
                                '<td class="white blue th-width">'+'排污情况'+'</td>'+
                                '<td class="white td-width">'+'${排污}'+'</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td class="white blue th-width">'+'是否直排'+'</td>'+
                                '<td class="white td-width">'+'${直排}'+'</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td colspan="2"><div><img src="./images/污染源.png" style="height:300px;width:398px" alt="污染源照片" /></div></td>'+
                            '</tr>'+
                        '</table> </div>'),
                "url":"http://####:#/arcgis/rest/services/sanyaHZZ/PollutionSource1/FeatureServer/0"
            },
            {

                "text":"重点治理城镇内河湖监测数据",
                "layerId":"重点治理城镇内河湖监测数据",
                "mapServiceStyle":"FeatureLayer",
                "checked":false,
                "infoTemplates":new InfoTemplate("河湖监测属性",'<div class="infoTemplatestable"><table >'+
                            '<tr>'+
                                '<td class="white blue th-width">'+'城市名称'+'</td>'+
                                '<td class="white td-width">'+'${城市名}'+'</td>'+

                            '</tr>'+
                            '<tr>'+
                                '<td class="white blue th-width">'+'水体名称'+'</td>'+
                                '<td class="white td-width">'+'${水体名}'+'</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td class="white blue th-width">'+'断面名称'+'</td>'+
                                '<td class="white td-width">'+'${断面名}'+'</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td class="white blue th-width">'+'监测时间'+'</td>'+
                                '<td class="white td-width">'+'${监测时}'+'</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td class="white blue th-width">'+'水质类别'+'</td>'+
                                '<td class="white td-width">'+'${水质类}'+'</td>'+
                            '</tr>'+
                        '</table> </div>'),
                "url":"http://####:#/arcgis/rest/services/sanyaHZZ/riverMonitoring/FeatureServer/0"
            },

            ]
    loadlayer();

        // 添加图层管理树
    $('#treeBox').tree({
            data:layerJson,
            checkbox: true,
            onCheck:function(node,checked){
                var childList = $(this).tree('getChildren',node.target);
                //如果点击父节点
                if(childList!=undefined&&childList.length>0){
                    for(var i=0;i<childList.length;i++)
                    {
                        var idx=childList[i].layerId;

                        if(idx=='养殖塘热力图')
                        {
                            if(HeatmapfeatureLayer.visible==true){
                                HeatmapfeatureLayer.setVisibility(false);

                            }
                            else{
                                HeatmapfeatureLayer.setVisibility(true);
                            }
                        }
                        else if(idx=='天地图影像底图'){

                            if(TiandiTilelayer.visible==true){
                                TiandiTilelayer.setVisibility(false);

                            }
                            else{
                                TiandiTilelayer.setVisibility(true);
                                // map.reorderLayer(TiandiVectorlayer, 0);
                                // map.reorderLayer(TiandiTilelayer, 1)

                            }

                        }
                        else if(idx=='2017年9月大茅水河道影像'){

                            if(layer_tiledms20170901.visible==true){
                                layer_tiledms20170901.setVisibility(false);

                            }
                            else{
                                layer_tiledms20170901.setVisibility(true);
                                map.reorderLayer(layer_tiledms20181029, 2);
                                map.reorderLayer(layer_tiledms20170901, 3)

                            }

                        }
                        else if(idx=='2018年10月大茅水河道影像'){

                            if(layer_tiledms20181029.visible==true){
                                layer_tiledms20181029.setVisibility(false);

                            }
                            else{
                                layer_tiledms20181029.setVisibility(true);
                                map.reorderLayer(layer_tiledms20181029, 3);
                                map.reorderLayer(layer_tiledms20170901, 2)

                            }

                        }
                        else{
                            var _layer=map.getLayer(idx) ;

                            if(checked==true){
                                _layer.setVisibility(true);

                            }
                            else{
                                _layer.setVisibility(false);
                            }
                        }
                    }
                }
                //如果点击子结点
                else
                {
                    var idx=node.layerId;
                    if(idx=='养殖塘热力图')
                        {
                            if(HeatmapfeatureLayer.visible==true){
                                HeatmapfeatureLayer.setVisibility(false);

                            }
                            else{
                                HeatmapfeatureLayer.setVisibility(true);
                            }
                        }
                    else if(idx=='天地图影像底图'){

                            if(TiandiTilelayer.visible==true){
                                TiandiTilelayer.setVisibility(false);

                            }
                            else{
                                TiandiTilelayer.setVisibility(true);
                                // map.reorderLayer(TiandiVectorlayer, 0);
                                // map.reorderLayer(TiandiTilelayer, 1)
                            }

                        }
                    else if(idx=='2017年9月大茅水河道影像'){

                        if(layer_tiledms20170901.visible==true){
                            layer_tiledms20170901.setVisibility(false);

                        }
                        else{
                            layer_tiledms20170901.setVisibility(true);
                            map.reorderLayer(layer_tiledms20181029, 2);
                            map.reorderLayer(layer_tiledms20170901, 3)

                        }

                    }
                    else if(idx=='2018年10月大茅水河道影像'){

                        if(layer_tiledms20181029.visible==true){
                            layer_tiledms20181029.setVisibility(false);

                        }
                        else{
                            layer_tiledms20181029.setVisibility(true);
                            map.reorderLayer(layer_tiledms20181029, 3);
                            map.reorderLayer(layer_tiledms20170901, 2)

                        }

                    }
                    else{
                        var _layer=map.getLayer(idx) ;

                        if(checked==true){
                            _layer.setVisibility(true);

                        }
                        else{
                            _layer.setVisibility(false);
                        }
                    }
                }
                addLegend();//更新图层的显示后，图例应有改变
            }
        });
    showchart();
    // 测量工具
    var measureTool = new MeasureTools({
            map: map
        }, "measureTools");

    function loadlayer(){
        for(var i=0;i<layerJson.length;i++)
        {
            if(layerJson[i].children!=undefined&&layerJson[i].children.length>0)//如果图层管理树有子节点，则遍历加载图层
            {
                for(var j=i;j<(i+layerJson[i].children.length);j++)
                {
                    var layer_info=layerJson[i].children[j-i];

                    var layer_temp;
                    if(layer_info.mapServiceStyle=="ArcGISTiledMapServiceLayer"){
                        layer_temp=new ArcGISTiledMapServiceLayer(layer_info.url,{id:layer_info.layerId});
                        layer_temp.setVisibility(layer_info.checked);
                        map.addLayer(layer_temp);

                    }
                    else if(layer_info.mapServiceStyle=="ArcGISDynamicMapServiceLayer"){
                        layer_temp=new ArcGISDynamicMapServiceLayer(layer_info.url,{id:layer_info.layerId});
                        layer_temp.setVisibility(layer_info.checked);
                        map.addLayer(layer_temp);
                    }
                    else if(layer_info.mapServiceStyle=='HeatmapLayer')////热力图图层
                    {
                        addHeatmapLayerFun();
                    }

                    else if(layer_info.mapServiceStyle=='FeatureLayer'){
                        layer_temp = new FeatureLayer(
                            layer_info.url,{
                                id:layer_info.layerId,
                                outFields: ["*"],
                                infoTemplate:layer_info.infoTemplates
                            });
                            layer_temp.setVisibility(layer_info.checked);
                        map.addLayer(layer_temp);
                    }
                    else{


                    }

                }
            }
            else//没有子节点，遍历
            {
                var layer_info=layerJson[i];
                var layer_temp;
                if(layer_info.mapServiceStyle=="ArcGISTiledMapServiceLayer"){
                    layer_temp=new ArcGISTiledMapServiceLayer(layer_info.url,{id:layer_info.layerId});
                    layer_temp.setVisibility(layer_info.checked);
                    map.addLayer(layer_temp);
                }
                else if(layer_info.mapServiceStyle=="ArcGISDynamicMapServiceLayer"){
                    layer_temp=new ArcGISDynamicMapServiceLayer(layer_info.url,{id:layer_info.layerId});
                    layer_temp.setVisibility(layer_info.checked);
                    map.addLayer(layer_temp);
                }
                else if(layer_info.mapServiceStyle=='HeatmapLayer')//热力图图层
                {
                    addHeatmapLayerFun();
                }
                else if(layer_info.mapServiceStyle=='FeatureLayer'){
                    layer_temp = new FeatureLayer(
                        layer_info.url,{
                            id:layer_info.layerId,
                            outFields: ["*"],
                            infoTemplate:layer_info.infoTemplates
                        });
                    layer_temp.setVisibility(layer_info.checked);
                    map.addLayer(layer_temp);
                }

                else{


                }


            }
        }
        // addHeatmapLayerFun();
        addLegend();
        popup();//更改属性弹窗的样式
    }

    function addHeatmapLayerFun(){
        //添加热力图渲染图层
        var layerDefinition = {
            "geometryType": "esriGeometryPoint",
            "fields": [{
                "name": "num",
                "type": "esriFieldTypeInteger",
                "alias": "num"
            }]
        }
        var featureCollection = {
        layerDefinition: layerDefinition,
        featureSet: null
        };
        //创建FeatureLayer图层
        HeatmapfeatureLayer = new esri.layers.FeatureLayer(featureCollection, {
            mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
            outFields: ["*"],
            opacity: 1,
            visible:true
        });
        var heatmapRenderer = new HeatmapRenderer({
            blurRadius: 2,
            colorStops: [
                { ratio: 0, color: "rgba(39,195,66, 0)" },
                { ratio: 0.25, color: "rgb(39,195,66,0.85)" },
                { ratio: 0.5, color: "rgb(176,196,11,0.85)"},
                { ratio: 0.75, color: "rgb(255,255,0,0.85)"},
                { ratio: 0.95, color: "rgb(196,83,11,0.85)"}
            ],
            field:'area',
            maxPixelIntensity: 20000,
            minPixelIntensity: 800
        });
        HeatmapfeatureLayer.setRenderer(heatmapRenderer);//heatmapRendererhtml中创建的渲染器
        map.addLayer(HeatmapfeatureLayer);
        var heatDataUrl = "../养殖塘点信息.json";//热力图渲染的源数据点
        $.getJSON(heatDataUrl,{},function(data,textStatus,jqXHR){
        for (var i = 0; i < data.data.length; i++) {
            var x = data.data[i].x;
            var y = data.data[i].y;
            var point = new esri.geometry.Point(x, y, new esri.SpatialReference({wkid: 4326}));//初始化起点
            var graphic =new esri.Graphic(point);
            graphic.setAttributes( {"area":Number(data.data[i].area)});
            HeatmapfeatureLayer.add(graphic);
        }
        });
    }

    function navEvent(id) {
            map.graphics.clear();
            switch (id) {
                case 'pan':
                    map.enablePan();
                    navToolbar.activate(Navigation.PAN);
                    navOption = id;
                    break;
                case 'zoomprev':
                    navToolbar.zoomToPrevExtent();
                    break;
                case 'zoomnext':
                    navToolbar.zoomToNextExtent();
                    break;
                case 'extent':
                    navToolbar.zoomToFullExtent();
                    break;
                case 'zoomin':
                    navToolbar.activate(Navigation.ZOOM_IN);
                    navOption = id;
                    break;
                case 'zoomout':
                    navToolbar.activate(Navigation.ZOOM_OUT);
                    navOption = id;
                    break;
                case 'deactivate':
                    navToolbar.deactivate();
                    navOption = id;
                    break;
                case 'layerListTool':

                    break;
                case 'legendTool':

                    break;
            }
        }

    //更改属性弹窗的样式
    function popup()
    {
        //标题背景
        $(".esriPopup .titlePane").css({
            // 'background-color':'rgba(65,106,135,0.8)'

            'background': 'rgba(0,0,0,0.3)',
            'color': 'rgba(255,255,255,0.90)'

        })
        //内容背景
        $(".esriPopup .contentPane").css({
            // 'background-color':'rgba(48,96,143,0.4)',
            'background-color':'rgba(0,0,0,0.3)',
            'color':'#FFFFFF',
            'padding':'0px',
            'font-size':'14px',
            'font-weight':'bold',
            'color': 'rgba(255,255,255,0.90)',
            'max-height': '800px'

        })
        $(".esriPopup .actionsPane").css({
            // 'background-color':'rgba(65,106,135,0.5)'
            'background-color':'rgba(0,0,0,0.3)',
            'color': 'rgba(255,255,255,0.90)'
        })
        //去掉最大化的按钮
        $(".esriPopup .titleButton.maximize").css({
            'display':'none'
        })
        //去掉缩放至的按钮
        $(".actionList").css({
            'display':'none'
        })
        $(".esriPopup .sizer").css({
            'position': 'relative',
            'width': '400px',
            'z-index': '1'
        })
        // makePopupDraggable();

    }

    //加载图例函数
    function addLegend(){
            // 用arcgis api 中的Legend显示图例
            var layerInfos=new Array();
            if(map.graphicsLayerIds.length>0)
            {
                for(var i=0;i<map.graphicsLayerIds.length;i++)
                {
                    var layer_temp={layer:map.getLayer(map.graphicsLayerIds[i]),title:map.getLayer(map.graphicsLayerIds[i]).id}
                    layerInfos.push(layer_temp)
                }
            }
            if (layerInfos.length > 0) {
                var legendDijit = new Legend({
                    map: map,
                    layerInfos: layerInfos,
                }, "legendDiv");
                legendDijit.startup();
            }
        }

    function makePopupDraggable(){
        var popupDiv = document.querySelector(".esriPopup");
        var dnd;
        if (popupDiv) {
            dnd = new Moveable(popupDiv);
        }
        // TODO: Figure out how to make the little arrow point the right way after dragging.
        return dnd;
    }

     function opensdzp() {
        if (sdidx_child) { layer.close(sdidx_child); }
        var adress=attributesToArray[5];



            sdidx = top.layer.open({
            skin: 'demo-class',
            title: '实拍图',
            type: 2,
            area: ['52.84%', '64.82%'],
            shadeClose: true,
            shade: false,
            content: htmlurl+'/firstpage/picture_layer1.html',
            end:function(){
                var index=parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            }
            });


    }

    map.on("click", function(evt) {
            console.log(evt);
            doIdentify_siluan(evt);
            doIdentify_reservoir(evt);
        });

        initIdentify_siluan();
        initIdentify_reservoir();

        function initIdentify_siluan() {
            initIdentify_siluan = new IdentifyTask("http://####:#/arcgis/rest/services/sanyaHZZ/siluan/MapServer");
            identifyParams_siluan = new IdentifyParameters();
            identifyParams_siluan.tolerance = 0.5;
            identifyParams_siluan.returnGeometry = true;
            identifyParams_siluan.layerIds = [0,1];
            identifyParams_siluan.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
        }
        function doIdentify_siluan(evt) {
            identifyParams_siluan.geometry=evt.mapPoint;
            identifyParams_siluan.mapExtent = map.extent;
            initIdentify_siluan.execute(identifyParams_siluan, function(idResults) {
                var a=idResults.length;
                console.log(idResults.length);
                if (idResults.length > 0) {
                    FID=idResults[0].feature.attributes.FID;
                    if(typeof FID==='undefined')
                    {
                        console.log('没有赋值');
                    }
                    else
                    {
                        var name=idResults[0].feature.attributes.name;
                        var attributesArray=new Array('河流名称',name);
                        var attributes=attributesArray.join(",");
                        $.cookie("attributes",attributes);
                        // var imageUrlArray=new Array(htmlurl+"/firstpage/picture/第一批河道管理范围/"+FID+"/1.png");
                        // var imageUrl=imageUrlArray.join(",");
                        // $.cookie("imageUrl",imageUrl);
                        $.cookie("sdidx",sdidx);
                        if (sdidx) { layer.close(sdidx); }
                        sdidx = layer.open({
                            skin: 'demo-class',
                            title: '属性信息',
                            type: 2,
                            area: ['200px', '100px'],
                            offset: [evt.y, evt.x],
                            shadeClose: true,
                            shade: false,
                            moveOut: true,
                            //content: '<div id="sdzp" onclick="opensdzp('+ID+');">查看实地图</div><img src="images/imformation/' + ID + '/' + ID + '.png" style="width:100%; height:calc(100% - 20px)">',
                            content:htmlurl+'/firstpage/Attributes_layer.html' ,
                        });
                    }
                }
            });
        }
        function initIdentify_reservoir() {
            identifyTask_reservoir = new IdentifyTask("http://####:#/arcgis/rest/services/sanyaHZZ/reservoir/MapServer");
            identifyParams_reservoir = new IdentifyParameters();
            identifyParams_reservoir.tolerance = 0.8;
            identifyParams_reservoir.returnGeometry = true;
            identifyParams_reservoir.layerIds = [0,1];
            identifyParams_reservoir.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
        }

        function doIdentify_reservoir(evt) {
            identifyParams_reservoir.geometry=evt.mapPoint;
            identifyParams_reservoir.mapExtent = map.extent;
            identifyTask_reservoir.execute(identifyParams_reservoir, function(idResults) {
                var a=idResults.length;
                console.log(idResults.length);
                if (idResults.length > 0) {

                    FID=idResults[0].feature.attributes.FID;

                    if(typeof FID==='undefined')
                    {
                        console.log('没有赋值');
                    }
                    else
                    {
                        var name=idResults[0].feature.attributes.name;
                        var attributesArray=new Array('水库名称',name);
                        var attributes=attributesArray.join(",");
                        $.cookie("attributes",attributes);
                        // var imageUrlArray=new Array(htmlurl+"/firstpage/picture/沉香小镇/"+adress+"/1.png",htmlurl+"/firstpage/picture/沉香小镇/"+adress+"/2.png",htmlurl+"/firstpage/picture/沉香小镇/"+adress+"/3.png",htmlurl+"/firstpage/picture/沉香小镇/"+adress+"/4.png",htmlurl+"/firstpage/picture/沉香小镇/"+adress+"/5.png");
                        // var imageUrl=imageUrlArray.join(",");
                        // $.cookie("imageUrl",imageUrl);
                        $.cookie("sdidx",sdidx);
                        if (sdidx) { layer.close(sdidx); }
                        sdidx = layer.open({
                            skin: 'demo-class',
                            title: '详细信息',
                            type: 2,
                            area: ['200px', '100px'],
                            offset: [evt.y, evt.x],
                            shadeClose: true,
                            shade: false,
                            moveOut: true,
                            //content: '<div id="sdzp" onclick="opensdzp('+ID+');">查看实地图</div><img src="images/imformation/' + ID + '/' + ID + '.png" style="width:100%; height:calc(100% - 20px)">',
                            content:htmlurl+'/firstpage/Attributes_layer.html' ,
                        });
                    }
                }
            });
        }
});

    function showchart() {
        document.getElementById("exChart-div").style.display = "block";
        var myChart = echarts.init(document.getElementById('exChart'));
        option = {
            title: {
                text: '数量变化统计图',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {},
            xAxis: {
                type: 'category',
                axisLabel: { //调整x轴的lable
                    textStyle: {
                        color: '#fff'
                    },
                    interval: 0,
                    rotate: -30
                },
                data: ['2017年数量', '2018数量', '新增数量', ]
            },
            yAxis: {
                type: 'value',
                axisLabel: { //调整x轴的lable
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            grid: {
                left: '14%'
            },
            series: [{
                data: [46, 76, 36],
                type: 'bar',
                barWidth: '30px'
            }]
        };
        myChart.setOption(option);
    }

    function layerListBoxManege(){
    if($('#layerListBox').css('display')=='none')
    {
        $('#layerListBox').css('display','block');
    }
    else
    {
        $('#layerListBox').css('display','none');
    }
}
    function legendBoxManege(){
        if($('#legendBox').css('display')=='none')
        {
            $('#legendBox').css('display','block');
            $('#legendBox').draggable();//实现窗口可拖拽
        }
        else
        {
            $('#legendBox').css('display','none');
        }
    }
</script>
</html>